<div class="demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 60, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="demo-example">
    <div class="demo-title">表单项d-form-item</div>
    <div class="demo-text">
      表单项，包含表单Label和具体表单输入组件。
    </div>
  </div>
  <div class="demo-example">
    <div class="demo-title">表单项d-form-label</div>
    <div class="demo-text">
      表单项Label，描述该项表单关键字，包括帮助信息、是否必填等功能。
    </div>
  </div>
  <div class="demo-example">
    <div class="demo-title">控件容器d-form-control</div>
    <div class="demo-text">
      表单项控件容器，里面容纳不同的表单输入组件。
    </div>
  </div>
  <div class="demo-example">
    <div class="demo-title">操作区容器d-form-operation</div>
    <div class="demo-text">
      操作区域容器，用来放置按钮等元素。
    </div>
  </div>

  <div class="demo-example">
    <div class="demo-title">基本用法</div>
    <div class="demo-text">
      基本用法当中，Label是在数据框的上面。
    </div>
    <d-codebox id="form-base" [sourceData]="BasicSource">
      <d-form-demo-base demo></d-form-demo-base>
    </d-codebox>
  </div>
  <div class="demo-example" [dAnchor]="'demo-label-horizontal'">
    <div class="demo-title">label横向排列</div>
    <div class="demo-text">
      Label左右布局方式
    </div>
    <d-codebox id="form-label-horizontal" [sourceData]="LabelHorizontalSource">
      <d-form-demo-label-horizontal demo></d-form-demo-label-horizontal>
    </d-codebox>
  </div>
  <div class="demo-example" [dAnchor]="'demo-modal'">
    <div class="demo-title">弹框表单</div>
    <div class="demo-text">
      弹框表单，弹框建议是400px，550px，700px，900px，建议宽高比是16:9、3：2
    </div>
    <d-codebox id="form-modal" [sourceData]="ModalSource">
      <d-form-demo-modal demo></d-form-demo-modal>
    </d-codebox>
  </div>

  <hr class="split-line" />

  <div class="demo-example" [dAnchor]="'demo-multi-col'">
    <div class="demo-title">多列表单</div>
    <div class="demo-text">
      多列表单
    </div>
    <d-codebox id="form-multi-col" [sourceData]="MultiColSource">
      <d-form-demo-multi-col demo></d-form-demo-multi-col>
    </d-codebox>
  </div>
  <div class="demo-example" [dAnchor]="'demo-filter'">
    <div class="demo-title">表单过滤</div>
    <div class="demo-text">
      表单与过滤功能相结合，灵活展示所需内容
    </div>
    <d-codebox id="form-filter" [sourceData]="FilterSource">
      <d-form-demo-filter demo></d-form-demo-filter>
    </d-codebox>
  </div>
</div>
